<template>
    <div class="star">
        <navigator
            :title="'给个Star'"
            :title_back="'rgb(25, 35, 47)'"
        ></navigator>
        <div class="title">
            您的总体体验如何?
        </div>
        <div class="help">
            他将帮助我们更好的为您服务
        </div>
        <div class="point">
            <star :point="point" @changePoint="change"></star>
        </div>
        <div class="txt">
            <textarea placeholder="说一下您的感受吧~限制70个字哦" v-model="value"></textarea>
            <span>
                {{ value.length }}/70
            </span>
        </div>
        <div class="btn">
            <button @click="submit()">
                提交
            </button>
        </div>
    </div>
</template>

<script>
// 引入评分组件
import star from '@/components/giveStar'
import navigator from '@/components/nav-head'
import {
    giveStar
} from '@/api'
export default {
    components: {
        navigator,
        star
    },
    data() {
        return {
            point: 1,
            value: ""
        }
    },
    watch:{
        value(nVal){
            this.value = nVal.substr(0,70)
        }
    },
    methods: {
        change(e){
            // console.log(e);
            this.point = e;
        },
        submit(){
            if(this.point <= 3 && this.value.length < 2){
                this.$Message.error('请提出我们的不足之处');
                return
            }
            // 调用评分接口
            giveStar({
                value: this.value,
                point: this.point
            }).then(res => {
                if(res.data.code == 1){
                    this.$Message.success(res.data.msg);
                    // 提示成功 返回上一页
                    setTimeout(() => {
                        this.$router.back();
                    }, 1200);
                }else{
                    this.$Message.error(res.data.msg)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .star{
        padding: 0 5%;
        padding-top: 44px;
        min-height: calc(100vh - 44px);
        background-color: rgb(25, 35, 47);
        color:rgb(136, 164, 201);
        .title{
            padding-top: 10px;
            height: 50px;
            line-height: 45px;
            font-size: 25px;
            letter-spacing: 2px;
        }
        .help{
            height: 35px;
            line-height: 35px;
            letter-spacing: 1px;
        }


        .txt{
            padding-top: 20px;
            position: relative;
            textarea{
                width: 100%;
                padding: 10px 7px;
                height: 120px;
                border: 0;
                outline: 0;
                color: #c5bebe;
                background-color: rgb(16, 23, 33);
                line-height: 18px;
                border-radius: 7px;
            }
            span{
                position: absolute;
                right: 10px;
                bottom: 5px;
            }
        }

        .btn{
            padding-top: 20px;
            button{
                width: 100%;
                height: 44px;
                border-radius: 7px;
                color: #fff;
                font-size: 16px;
                border: 0;
                outline: 0;
                background-image: linear-gradient(to right, rgb(33, 193, 129), rgb(33, 193, 167));
            }
        }
    }
</style>